@import '../../../styles/base.scss';
@import '../../../styles/style.scss';

.showItem {
  overflow: hidden;
  position: relative;
  margin-bottom: $space + 10px;
  width: 47.83%;
  height: 330px;
  color: #fff;
  background-size: cover;
  border-radius: 20px;
  user-select: none;
  @extend .trans;
  cursor: pointer;

  .link {
    color: #fff;
  }

  .link:hover {
    color: #fff;
  }

  .title {
    position: relative;
    padding-top: 46px;
    font-size: 36px;
    font-weight: 700;
    margin: 0 auto;
    height: 90px;
    width: 75%;
    @extend .trans;
    z-index: 2;
    border-bottom: 4px solid transparent;
  }

  .descr {
    position: relative;
    z-index: 2;
    padding-top: 10px;
    width: 75%;
    margin: 0 auto;
    font-size: 24px;
    @extend .trans;
    word-wrap: break-word;
    opacity: 0;
    line-height: 1.5;
  }

  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    @extend .trans;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
.showItem:hover {
  transform: scale(1.04);
}
.showItem:hover .title {
  border-bottom: 4px solid #fff;
}
.showItem:hover .descr {
  opacity: 1;
}
.showItem:hover .mask {
  background-color: rgba(0, 0, 0, 0.6);
}

.showItem:nth-last-child(1),
.showItem:nth-last-child(2) {
  margin-bottom: 0;
}

@media screen and (max-width: 1240px) {
  .showItem {
    margin-bottom: 10rem;
    width: 48.81%;
    height: 160rem;
    border-radius: 10rem;

    .title {
      padding-top: 20rem;
      font-size: 18rem;
      height: 48rem;
      border-bottom: 4px solid transparent;
    }

    .descr {
      padding-top: 4rem;
      width: 75%;
      font-size: 13rem;
    }
  }

  .showItem:hover .title {
    border-bottom: 2rem solid #fff;
  }
}
